import { defineComponent } from "vue";
import {
  Tree,
  Modal,
  Input,
  Button,
  Icon,
  message,
  Empty,
  ConfigProvider,
} from "ant-design-vue";
import { TreeNode } from "ant-design-vue/lib/vc-tree";
import zhCN from "ant-design-vue/es/locale/zh_CN";

export default defineComponent({
  menuName: "nodeTree",
  props: {
    treeData: {
      type: Array,
      default: () => [],
    },
    visibleModal: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "批量启用",
    },
  },
  computed: {
    visible: {
      get() {
        return this.visibleModal;
      },
      set(val) {
        this.$emit("update:visibleModal", val);
      },
    },
    rightList() {
      let arr = [];
      if (this.selectedId.length > 0) {
        this.selectedId.forEach((item) => {
          arr.push({
            menuId: item,
            menuName: this.map[item],
          });
        });
      } else {
        arr = [];
      }
      return arr;
    },
  },
  data() {
    return {
      replaceFields: {
        title: "menuName",
        key: "menuId",
      },
      selectedId: [], //选中项
      autoExpandParent: true,
      expandCheckId: [], //展开项
      map: {},
    };
  },
  methods: {
    onCheck(checkedKeys, e) {
      if (checkedKeys.length > 0) {
        if (!(e.node.eventKey in this.map)) {
          this.map[e.node.eventKey] = e.node.title;
        }
      } else {
        this.map = {};
      }
      this.selectedId = checkedKeys;
    },
    onExpand(value) {
      this.expandCheckId = value;
      this.autoExpandParent = false;
    },
    onSearch(value) {
      this.expandCheckId = this.getParentKey(value, this.treeData);
      this.autoExpandParent = true;
    },
    getParentKey(key, tree) {
      let searchId = [];
      if (Array.isArray(tree) && tree.length > 0) {
        tree.forEach((item) => {
          if (item.menuName.includes(key)) {
            searchId.push(item.menuId);
          }
          if (item.children && item.children.length > 0) {
            searchId = searchId.concat(this.getParentKey(key, item.children));
          }
        });
      }
      return searchId;
    },
    offBatchModal() {
      this.selectedId = [];
      this.visible = false;
    },
    async submit() {
      if (this.selectedId.length === 0) {
        Modal.info({
          title: "提示",
          content: "请至少选择一个菜单用于" + this.title,
        });
      } else {
        try {
          // const res = await saveMenuIdList({ selectedId: this.selectedId });
          // if (res && res?.code === 200) {
          // this.offBatchModal()
          message.success(this.title + "操作成功", 2);
          // } else {
          //   Modal.info({
          //     title: "提示",
          //     content: this.title + "操作失败",
          //   });
          // }
        } catch (e) {
          Modal.info({
            title: "提示",
            content: this.title + "操作失败",
          });
        }
      }
    },
    clear() {
      this.selectedId = [];
    },
    delete(menuId) {
      this.selectedId.splice(this.selectedId.indexOf(menuId), 1);
    },
  },
  render() {
    const { treeData, rightList } = this;
    const loop = (data) =>
      data.map((item) => {
        if (item.children && item.children.length) {
          return (
            <TreeNode checkable={false} key={item.menuId} title={item.menuName}>
              {loop(item.children)}
            </TreeNode>
          );
        }
        return <TreeNode key={item.menuId} title={item.menuName} />;
      });
    return (
      <ConfigProvider locale={zhCN}>
        <Modal
          visible={this.visible}
          title={this.title}
          onCancel={this.offBatchModal}
          onOk={this.submit}
          ok-text="确定"
          cancel-text="取消"
          width="700px"
        >
          <div class="content">
            <div class="item">
              <div class="top">
                <Input.Search
                  placeholder="请输入菜单名称"
                  onSearch={this.onSearch}
                ></Input.Search>
              </div>
              <div class="item-content">
                {this.treeData.length > 0 ? (
                  <Tree
                    checkable={true}
                    replaceFields={this.replaceFields}
                    onCheck={this.onCheck}
                    checkedKeys={this.selectedId}
                    onExpand={this.onExpand}
                    expandedKeys={this.expandCheckId}
                    autoExpandParent={this.autoExpandParent}
                    style={{ textAlign: "left" }}
                    class="my-tree"
                  >
                    {loop(treeData)}
                  </Tree>
                ) : (
                  <Empty style={{ marginTop: "20px" }} />
                )}
              </div>
            </div>
            <div class="item">
              <div class="top">
                <div class="num">{"已选：" + this.selectedId.length}</div>
                <Button onClick={this.clear}>重置</Button>
              </div>
              <div class="item-content">
                {rightList.map((item) => {
                  return (
                    <div class="menu-item">
                      <div class="menu-item-name" title={item.menuName}>
                        {item.menuName}
                      </div>
                      <Icon
                        type="close-circle"
                        onClick={() => this.delete(item.menuId)}
                      />
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </Modal>
      </ConfigProvider>
    );
  },
});
